<template>
  <div>
    <!-- <div class="image-hover">
      <div></div>
      <div class="bgcimg">
        <span>×</span>
      </div>
    </div> -->
    <TypeNav />
    <ListContainer />
    <TodayRecommend />
    <Rank />
    <Like />
    <Floor
      v-for="floor in floorData"
      :key="floor.id"
      :floor="floor"
      :clsname="'floor' + floor.id"
    />
    <Brand />
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import ListContainer from "./ListContainer";
import TodayRecommend from "./TodayRecommend";
import Rank from "./Rank";
import Like from "./Like";
import Floor from "./Floor";
import Brand from "./Brand";

export default {
  name: "Home",
  components: {
    ListContainer,
    TodayRecommend,
    Rank,
    Like,
    Floor,
    Brand,
  },
  methods: {
    ...mapActions("home", ["getFloor"]),
  },
  computed: {
    ...mapState("home", ["floorData"]),
  },
  mounted() {
    this.getFloor();
  },
};
</script>

<style>
/* .image-hover {
  position: relative;
  display: flex;
  width: 1020px;
  height: 460px;
  left: 50px;
  top: 0;
}
.image-hover .bgcimg {
  position: absolute;
  width: 940px;
  height: 100%;
  z-index: 9999;
  background-image: url("./dc3efedf4d4cd5de.jpg.webp");
  background-size: cover;
} */
</style>